<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美Tab标签页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .tab-container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* Tab导航栏样式 */
        .tab-nav {
            position: relative;
            display: flex;
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            border-radius: 20px 20px 0 0;
            padding: 10px;
        }

        /* Tab标签样式 */
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 20px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 600;
            font-size: 16px;
            transition: color 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .tab-item:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        /* 激活状态的Tab标签 */
        .tab-item.active {
            color: white;
        }

        /* 滑动背景效果 */
        .tab-slider {
            position: absolute;
            height: calc(100% - 20px);
            background: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 1;
            top: 10px;
            left: 10px;
            width: calc(25% - 20px);
        }

        /* Tab内容区域 */
        .tab-content {
            padding: 30px;
            min-height: 300px;
        }

        .tab-pane {
            display: none;
            animation: fadeIn 0.6s ease-in-out;
        }

        .tab-pane.active {
            display: block;
        }

        /* 内容样式 */
        .content-title {
            color: #333;
            font-size: 24px;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .content-text {
            color: #666;
            line-height: 1.6;
            font-size: 16px;
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .tab-item {
                padding: 12px 10px;
                font-size: 14px;
            }
            
            .tab-content {
                padding: 20px;
                min-height: 250px;
            }
            
            .content-title {
                font-size: 20px;
            }
            
            .content-text {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <!-- Tab导航栏 -->
        <div class="tab-nav" id="tabNav">
            <div class="tab-item active" data-tab="home">首页</div>
            <div class="tab-item" data-tab="about">关于</div>
            <div class="tab-item" data-tab="services">服务</div>
            <div class="tab-item" data-tab="contact">联系</div>
            <div class="tab-slider" id="tabSlider"></div>
        </div>

        <!-- Tab内容区域 -->
        <div class="tab-content">
            <!-- 首页内容 -->
            <div class="tab-pane active" id="home-content">
                <h2 class="content-title">欢迎来到首页</h2>
                <p class="content-text">
                    这是一个精美的Tab标签页组件，具有流畅的动画效果和优雅的设计。当您在不同标签页之间切换时，
                    背景滑块会平滑地移动到相应位置，创造出令人愉悦的用户体验。
                </p>
                <p class="content-text" style="margin-top: 15px;">
                    该组件使用纯HTML、CSS和JavaScript实现，无需任何外部库。所有的动画效果都通过CSS3实现，
                    确保了最佳的性能和兼容性。
                </p>
            </div>

            <!-- 关于内容 -->
            <div class="tab-pane" id="about-content">
                <h2 class="content-title">关于我们</h2>
                <p class="content-text">
                    我们致力于创造美观、实用且用户友好的网页组件。这个Tab标签页组件是我们精心设计的作品之一，
                    它展示了现代Web开发的技术和美学。
                </p>
                <p class="content-text" style="margin-top: 15px;">
                    通过使用CSS的transform和transition属性，我们实现了流畅的动画效果。JavaScript负责处理
                    用户交互和状态管理，确保组件的响应性和可靠性。
                </p>
            </div>

            <!-- 服务内容 -->
            <div class="tab-pane" id="services-content">
                <h2 class="content-title">我们的服务</h2>
                <p class="content-text">
                    我们提供多种Web开发服务，包括但不限于：
                </p>
                <ul class="content-text" style="margin-top: 15px; padding-left: 20px;">
                    <li>响应式网页设计</li>
                    <li>前端组件开发</li>
                    <li>动画效果实现</li>
                    <li>性能优化</li>
                    <li>跨浏览器兼容性</li>
                </ul>
                <p class="content-text" style="margin-top: 15px;">
                    每个项目都经过精心设计和严格测试，确保为客户提供最佳的解决方案。
                </p>
            </div>

            <!-- 联系内容 -->
            <div class="tab-pane" id="contact-content">
                <h2 class="content-title">联系我们</h2>
                <p class="content-text">
                    如果您对我们的服务感兴趣或有任何问题，请随时联系我们：
                </p>
                <div class="content-text" style="margin-top: 15px;">
                    <p><strong>邮箱：</strong>contact@example.com</p>
                    <p><strong>电话：</strong>+86 123 4567 8900</p>
                    <p><strong>地址：</strong>中国某市某区某街道123号</p>
                </div>
                <p class="content-text" style="margin-top: 15px;">
                    我们期待与您的合作！
                </p>
            </div>
        </div>
    </div>

    <script>
        // 获取所有需要的DOM元素
        const tabItems = document.querySelectorAll('.tab-item');
        const tabPanes = document.querySelectorAll('.tab-pane');
        const tabSlider = document.getElementById('tabSlider');

        // 初始化滑块位置
        function initSlider() {
            const activeTab = document.querySelector('.tab-item.active');
            if (activeTab) {
                updateSliderPosition(activeTab);
            }
        }

        // 更新滑块位置的函数
        function updateSliderPosition(activeTab) {
            const index = Array.from(tabItems).indexOf(activeTab);
            const tabWidth = activeTab.offsetWidth;
            const tabLeft = activeTab.offsetLeft;
            
            // 使用transform来平滑移动滑块
            tabSlider.style.transform = `translateX(${tabLeft - 10}px)`;
            tabSlider.style.width = `${tabWidth}px`;
        }

        // 切换Tab的函数
        function switchTab(clickedTab) {
            // 移除所有tab-item的active类
            tabItems.forEach(item => item.classList.remove('active'));
            // 为点击的tab添加active类
            clickedTab.classList.add('active');
            
            // 隐藏所有内容面板
            tabPanes.forEach(pane => pane.classList.remove('active'));
            
            // 显示对应的内容面板
            const tabId = clickedTab.getAttribute('data-tab');
            const targetPane = document.getElementById(`${tabId}-content`);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 更新滑块位置
            updateSliderPosition(clickedTab);
        }

        // 为每个tab项添加点击事件监听器
        tabItems.forEach(item => {
            item.addEventListener('click', () => {
                switchTab(item);
            });
        });

        // 窗口大小改变时重新计算滑块位置
        window.addEventListener('resize', () => {
            const activeTab = document.querySelector('.tab-item.active');
            if (activeTab) {
                updateSliderPosition(activeTab);
            }
        });

        // 页面加载完成后初始化滑块
        document.addEventListener('DOMContentLoaded', () => {
            initSlider();
        });
    </script>
</body>
</html>
